<script lang='ts' setup>
import { computed, inject, ref, onMounted } from 'vue'
import draggableComponent from 'vue3-draggable-next';
import InputItem from '../item/fat-form-create-item.vue'
import { Edit, Delete, Grid, Rank } from '@element-plus/icons-vue'
import { ElPopconfirm } from 'element-plus';
import { IFormConfig, IFormItem } from '../type'
import { EFormItemContainer } from '../enum';

interface Props {
  itemKey: string
  list: IFormItem[]
}
interface Emit {
  (event: 'update:list', value: any): void
  (event: 'clone', value: any): void
}
const props = defineProps<Props>()
const emit = defineEmits<Emit>()
const formConfig = inject<IFormConfig>("formConfig")
const editItem = inject<(item: IFormItem) => void>("editItem")
const list = computed({
  get() {
    return props.list
  },
  set(value) {
    emit('update:list', value)
  }
})

const dragContainer = ref()

function handleChange() {
  list.value.forEach((i, index) => {
    i.index = index
  })
}
function handleEdit(item: IFormItem) {
  if (editItem) {
    editItem(item)
  }
}
function handleRemove(item: IFormItem) {
  list.value.splice(item.index, 1)
  handleChange()
}
</script>

<template>
  <draggable-component ref="dragContainer" item-key="id" :list="list" class="list-group" :sort="true"
    @change="handleChange" ghost-class="drag-item-ghost" drag-class="drag-item-drag" handle=".drag-handle"
    :group="{ name: 'list', pull: true, put: true }" :animation="250" force-fallback>
    <template #item="{ element, index }">
      <div class="drag-item-container" :style="{ gridColumn: `span ${element.span}` }">
        <el-button text type="info" class="drag-handle" :icon="Rank" />
        <!-- <el-form-item :prop="element.name" :label="!isContainer(element) && element.label"
                                          :label-width="isContainer(element) ? '0px' : `${formConfig?.labelWidth}px`"> -->
        <InputItem mode="edit" class="drag-item" v-model="element.defaultValue" :item="element"></InputItem>
        <!-- </el-form-item> -->
        <el-button-group class="drag-item-edit">
          <el-button type="warning" circle plain size="small" :icon="Edit" @click="handleEdit(element)"
            class="drag-edit" />
          <el-popconfirm title="请确认是否删除?" cancel-button-text="取消" confirm-button-text="删除"
            @confirm="handleRemove(element)">
            <template #reference>
              <el-button :icon="Delete" circle plain type="danger" size="small" class="drag-delete" />
            </template>
          </el-popconfirm>
        </el-button-group>
      </div>
    </template>
  </draggable-component>
</template>

<style lang='scss' scoped>
.list-group {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(24, 1fr);
  padding: 14px;
  border-radius: 5px;
  align-content: start;
  gap: 14px;
  min-height: 48px;

  :deep(.drag-item-ghost) {
    border: cadetblue 1px solid;
    border-top: cadetblue 4px solid !important;
    opacity: 0.6;
    min-width: 140px;
  }

  :deep(.drag-item-drag) {
    border: cadetblue 1px dashed;
    opacity: 0.3;
  }
}

.drag-item-container {
  display: flex;
  border: #bbb 1px dashed;
  border-radius: 5px;
  position: relative;
  // height: 42px;

  :deep(.el-form-item) {
    width: 100%;
    margin: 4px 0;
  }

  .drag-handle {
    font-weight: bolder;
    height: 100%;
    width: 12px;
    cursor: move;
  }

  .drag-item {
    flex: 1;
    margin-right: 24px;
  }

  .drag-item-edit {
    position: absolute;
    top: 8px;
    right: -12px;
    // width: 88px;
    // transform: scale(0.8);
  }

  .drag-edit,
  .drag-delete {
    // width: 24px;
  }
}
</style>